<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath%>js/ajax.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	var xhr;

	//初始化 xhr 对象  
	//return value : 1 : IE , 2 , Mozila , 0 : create xhr error ;  
	function createXHR() {
		// 1,创建xhr 对象 .  
		if (window.ActiveXObject) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
			return 1;
		} else if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
			return 2;
		} else {
			return 0;
		}
	}

	//////////// 验证用户名是否存在 ////////////////////  

	//将用户填写的用户名发送给服务器端验证  
	function checkUserName() {
		var ret = createXHR();
		if (ret == 0) {
			alert("create xhr error");
		} else {
			// 在xhr中注册用于处理应答的函数(handleCheck)  
			xhr.onreadystatechange = handleCheck;
			
			var url = "<%=basePath%>ajax/checkUser";

			//使用Get方式向服务器发送请求 .  
			// 			url = makeQueryString(url);  
			// 			xhr.open("get", url) ;  
			// 			xhr.send(null); 

			// 通过Post 形式向服务器发送数据 .  
			xhr.open("post", url);
			xhr.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			xhr.send(makeQueryString(null));
		}
	}

	//在指定的URL上添加参数  
	function makeQueryString(url) {
		var name = $("#nameId").val();
		if (url == null) {
			return "user.name=" + name;
		} else {
			return url + "?user.name=" + name;
		}
	}

	function handleCheck() {
		// readyState : 1: 初始化阶段 2 ：连接建立阶段 3 : 通信中阶段 4 ： 通信结束  
		if (xhr.readyState == 4) {
			// status==200, 表示服务器运行正常, 其他值代表错误  
			if (xhr.status == 200) {
				processResult();
			} else if (document.getElementById("nameId").value == "") {
				document.getElementById("nameId2").firstChild.nodeValue = "用户名不能为空";
				document.getElementById("nameId2").color = "red";
			}
		}
	}

	function processResult() {
		// 获得应答内容 ,把应答内容显示在网页上  
		var span = document.getElementById("msgId");
		span.innerHTML = xhr.responseText;
	}
	
</script>
</head>
<body>
	<form>
		用户名验证(采用原始的  xmlhttprequest 方式)<br/>
		用户名: <input type="text" id="nameId" />
		<input type="button" onclick="checkUserName()" value="提交" />
		<span id="nameId2"><span></span></span>
		<span id="msgId"></span>
	</form>
	<hr />
	<form name="frmMenu">
		<div>
			级联菜单 (jquery) <br/>
			<select name="schoolId" id="schoolId" onchange="findClassbySchoolId()">
				<option selected value="-1">---</option>
				<option value="1">学校1</option>
				<option value="2">学校2</option>
				<option value="3">学校3</option>
			</select>
			<select name="classId" id="classId">
				<option selected value="-1">---</option>
			</select>
		</div>
	</form>
</body>
</html>